.iniciar {display:none}

#svg{
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    left:0;
    right:0;
}
#paceStatus:after {
    display: block;
    position: absolute;
    top: 0;
    right: .5rem;
    content: attr(data-progress-text);
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 100;
    font-size: 5rem;
    line-height: 1;
    text-align: right;
    color: rgba(0, 0, 0, 0.19999999999999996);
}
#vermelho
{
    -webkit-animation: vermelho 2s linear 3.5s forwards
}
#laranja
{
    -webkit-animation: laranja 2s linear 3s forwards;
}

#amarelo
{
    -webkit-animation: amarelo 2s linear 2.5s forwards;
}
#verde
{
    -webkit-animation: verde 2s linear 2s forwards;
}
#azul
{
    -webkit-animation: azul 2s linear 1.5s forwards;
}
#roxo
{
    -webkit-animation: roxo 2s linear 1s forwards;
}

#cinza
{
    -webkit-animation: cinza 2s linear 0.5s forwards;
}


@-webkit-keyframes cinza{
    from{-webkit-transform:translateY(0px);}
    to{-webkit-transform:translateY(550px);}
}

@-webkit-keyframes roxo{
    from{-webkit-transform:translateY(0px);}
    to{-webkit-transform:translateY(547px);}
}
@-webkit-keyframes azul{
    from{-webkit-transform:translateY(0px);}
    to{-webkit-transform:translateY(367px);}
}


@-webkit-keyframes verde{
    from{-webkit-transform:translateY(0px);}
    to{-webkit-transform:translateY(365px);}
}

@-webkit-keyframes amarelo{
    from{-webkit-transform:translateY(0px);}
    to{-webkit-transform:translateY(180px);}
}

@-webkit-keyframes laranja{
    from{-webkit-transform:translateY(0px);}
    to{-webkit-transform:translateY(180px);}
}

.iniciar{
    width:160px;
    height:60px;
    font-size: 30px;
    background: rgba(0,0,0,0.8);
}

.anim {
    fill: #163B8B;
    stroke: #163B8B;
    -webkit-animation:scaleanim 2s ease;
    -moz-animation:scaleanim 2s ease;
    -o-animation:scaleanim 2s ease;
    -ms-animation:scaleanim 2s ease;
    animation:scaleanim 2s ease;
    -webkit-transform-origin:70% 70%;
}

@-webkit-keyframes scaleanim {
    0% { -webkit-transform: scale(0);
        width:0;
        fill:white;
        stroke:white;
        width: 90%;
        margin: 0 5%;

    }


    100% { -webkit-transform: scale(1);
        width:200px;
        fill: #163B8B;
        stroke: #163B8B;

    }
}

@keyframes scaleanim {
    0% { -webkit-transform: scale(1); }
    30% { -webkit-transform: scale(1); }
    40% { -webkit-transform: scale(1.2); }
    50% { -webkit-transform: scale(1); }
    60% { -webkit-transform: scale(1); }
    70% { -webkit-transform: scale(1.2); }
    80% { -webkit-transform: scale(1); }
    100% { -webkit-transform: scale(1); }
}